<template>
  <tab-bar>
    <tabBarItem v-for="item in tabItem" :key="item.id" :path="item.path">
      <span slot="iconfont" class="iconfont iconsize">
          <van-icon :name="item.icon" :info="getInfo(item.dot)" />
      </span>
      <span slot="itemname" class="text">{{ item.itemName }}</span>
    </tabBarItem>
  </tab-bar>
</template>

<script>
import { Icon } from 'vant';
import tabBar from 'components/common/tabbar/tabbar.vue';
import tabBarItem from 'components/common/tabbar/tabbarItem.vue';

export default {
    name: 'project-tabBar',
    props: {
        unReadMessage: {
            type: Number,
            required: true
        }
    },
    data () {
        return {
            tabItem: [
                {
                    id: 1,
                    itemName: this.$t('tabBar.index'),
                    path: '/',
                    icon: 'wap-home',
                    dot: false
                },
                {
                    id: 2,
                    itemName: this.$t('tabBar.message'),
                    path: '/message',
                    icon: 'chat',
                    dot: true
                },
                {
                    id: 3,
                    itemName: this.$t('tabBar.order'),
                    path: '/orders',
                    icon: 'bag',
                    dot: false
                },
                {
                    id: 4,
                    itemName: this.$t('tabBar.profile'),
                    path: '/profile',
                    icon: 'friends',
                    dot: false
                }
            ],
            unReadMsg: 0
        };
    },
    components: {
        tabBar,
        tabBarItem,
        [Icon.name]: Icon
    },
    computed: {
        getInfo () {
            return function (dot) {
                if (dot && this.unReadMsg) {
                    return this.unReadMsg;
                }
            };
        }
    },
    watch: {
        unReadMessage (value) {
            if (value > 0) {
                this.unReadMsg = value;
            }
        }
    }
};
</script>

<style scoped lang="less">
@import "../assets/css/global-varible.less";

.tabbarItem {
  & > span {
    color: @inActiveBarBgColor;
    &.iconsize {
      font-size: 0.7rem;
    }
    &.text {
      letter-spacing: 2px;
      margin-top: 2px;
      font-size: 0.48rem;
    }
  }
  &.active > span {
    color: @activeBarBgColor;
  }
}
</style>
